<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/layui/layui.js"></script>
    <script src="static/layui/xm-select.js"></script>
    <style>
        .upload-group .upload-btn {
            height: 50px;
        }

        .upload-group .image-group {
            display: flex;
            flex-wrap: wrap;
        }

        .upload-group .image-group .image-item {
            height: 110px;
            width: 110px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .upload-group .image-group .image-item:hover .img-opt {
            display: flex;
        }

        .upload-group .image-group .image-item .img-view {
            height: 100px;
            width: 100px;
            outline: 1px solid #333;
        }

        .upload-group .image-group .image-item .img-view img {
            display: block;
            height: 100%;
            width: 100%;
        }

        .upload-group .image-group .image-item .img-opt {
            height: 100%;
            width: 100%;
            position: absolute;
            background-color: rgba(255, 255, 255, .5);
            display: none;
            align-items: center;
            justify-content: center;
        }


        .upload-group .image-group .image-item .img-opt i {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            width: 40px;
            font-size: 20px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div style="width: 95%;margin: 5px auto">
    <form class="layui-form">
        <input type="hidden" name="id" value="${userinfo.id}">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" value="${userinfo.username}" name="username" id="username" placeholder="用户名"
                       lay-verify="required" lay-reqtext="请填写用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="nickname" class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <input type="text" value="${userinfo.nickname}" name="nickname" id="nickname" placeholder="昵称"
                       lay-verify="required" lay-reqtext="请填写昵称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">手机号</label>
            <!-- 手机号的验证规则  /^1\d{10}$/   1开头后面跟10个数字 -->
            <div class="layui-input-block">
                <input type="text" value="${userinfo.phone}" name="phone" id="phone" placeholder="手机号"
                       lay-verify="required|phone" lay-reqtext="请填写手机号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="roleId" class="layui-form-label">选择角色</label>
            <div class="layui-input-block">
                <c:choose>
                    <c:when test="${type == 'info' or loginInfo.roleId != 1}">
                        <input type="text" disabled value="${userinfo.role.roleName}" class="layui-input">
                        <input type="hidden" name="roleId" value="${userinfo.roleId}">
                    </c:when>
                    <c:otherwise>
                        <select name="roleId" id="roleId" lay-search>

                        </select>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="projectIds" class="layui-form-label">选择项目</label>
            <div class="layui-input-block">
                <div id="projectIds"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="status" class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <c:choose>
                    <c:when test="${type == 'info' or loginInfo.roleId != 1}">
                        <input type="text" disabled value="${userinfo.status == 1 ?'可用':'禁用'}" class="layui-input">
                        <input type="hidden" name="status" value="${userinfo.status}">
                    </c:when>
                    <c:otherwise>
                        <select name="status" id="status">
                            <option value="1">可用</option>
                            <option value="2">禁用</option>
                        </select>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
        <div class="layui-form-item ">
            <label for="avatarBtn" class="layui-form-label">头像</label>
            <input type="hidden" id="avatar" name="avatar">
            <div class="layui-input-block">
                <div class="upload-group">
                    <div class="upload-btn">
                        <button type="button" class="layui-btn" id="avatarBtn">上传头像</button>
                    </div>
                    <div class="image-group" id="avatarImage">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item ">
            <label for="photoBtn" class="layui-form-label">相册</label>
            <input type="hidden" name="imageUrls" id="imageUrls">
            <div class="layui-input-block">
                <div class="upload-group">
                    <div class="upload-btn">
                        <button type="button" class="layui-btn" id="photoBtn">上传照片</button>
                    </div>
                    <div class="image-group" id="photoImage">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button lay-submit class="layui-btn" lay-filter="update">提交</button>
        </div>
    </form>
</div>
</body>
<script>
    let status = "${userinfo.status}";
    let avatar = "${userinfo.avatar}";
    let imageUrls = [];
    if (status) {
        $("#status").val(status);
        $("#username").prop("readonly", true);
        setAvatar(avatar);
    }
    var form;
    var proSelect;
    layui.use(function () {
        form = layui.form;
        const upload = layui.upload;
        getRoleSelect();
        getProjectSelect();
        getImageList();
        upload.render({
            elem: "#avatarBtn",
            url: "upload",
            acceptMime: 'image/*',
            size: 1024 * 1024 * 20,/*单位kb*/
            done(res) {
                if (res.code === 200) {
                    setAvatar(res.msg);
                }
            },
            error(e) {
                console.log(e);
                layer.msg('头像上传异常！', {icon: 2});
            }
        });
        upload.render({
            elem: "#photoBtn",
            url: "upload",
            acceptMime: 'image/*',
            size: 1024 * 1024 * 20,/*单位kb*/
            done(res) {
                if (res.code === 200) {
                    imageUrls.push(res.msg)
                    setPhoto();
                }
            },
            error(e) {
                console.log(e);
                layer.msg('照片上传异常！', {icon: 2});
            }
        });
        form.on("submit(update)", function (data) {
            $.ajax({
                url: "userinfo/update",
                data: data.field,
                method: "post",
                dataType: "json",
                success(res) {
                    if (res.code === 200) {
                        layer.msg('操作成功！', {icon: 1}, function () {
                            /*获取当前窗口的标记值*/
                            const index = parent.layer.getFrameIndex(window.name);
                            /*关闭窗口*/
                            parent.layer.close(index);
                            /*刷新list中的表格*/
                            parent.table.reloadData('dataTable')
                        });
                    } else {
                        layer.alert(res.msg, {icon: 2});
                    }
                },
                error(e) {
                    layer.alert('服务器睡着了', {icon: 6})
                    console.log(e)
                }
            })
            return false;
        });
    })

    function getRoleSelect() {
        $.ajax({
            url: "role/select",
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    const roleList = res.data;
                    let $html = '';
                    for (const role of roleList) {
                        let disabled = 'disabled';
                        if (role.status === 1) {
                            disabled = "";
                        }
                        $html += '<option ' + disabled + ' value="' + role.id + '">' + role.roleName + '</option>';
                    }
                    $("#roleId").empty().append($html);
                    /*渲染完成后获取修改用户的角色id*/
                    const roleId = "${userinfo.roleId}";
                    if (roleId) {
                        $("#roleId").val(roleId);
                    }
                    /*动态追加下拉框之后，要重新渲染form*/
                    form.render();

                } else {
                    layer.alert("角色列表加载异常！", {icon: 2});
                }
            },
            error(e) {
                layer.alert("角色列表加载异常！", {icon: 2});
                console.log(e)
            }
        });
    }

    function getProjectSelect() {
        $.ajax({
            url: "project/select",
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    const xmList = res.data.map(item => {
                        return {
                            name: item.projectName,
                            value: item.id,
                            disabled: item.status === 2
                        }
                    })
                    proSelect = xmSelect.render({
                        el: "#projectIds",
                        filterable: true,
                        data: xmList,
                        name: "projectIds",
                        max: 5,
                        toolbar: {
                            show: true,
                        },
                        autoRow: true,
                        height: "200px"
                    })
                    const id = "${userinfo.id}";
                    if (id) {
                        $.ajax({
                            url: "userinfo/project/" + id,
                            method: "get",
                            dataType: "json",
                            success(res) {
                                if (res.code === 200) {
                                    const proIdList = res.data.map(item => item.projectId)
                                    proSelect.setValue(proIdList)
                                } else {
                                    layer.alert("数据加载异常！", {icon: 2});
                                }
                            },
                            error(e) {
                                console.log(e)
                                layer.alert("服务器睡着了！", {icon: 2});
                            }
                        })
                    }
                } else {
                    layer.alert('数据加载异常！')
                }
            },
            error(e) {
                layer.alert('数据加载异常！')
                console.log(e)
            }
        })

    }

    function setAvatar(fileName) {
        $("#avatar").val(fileName);
        if (fileName) {
            let $html = '<div class="image-item"><div class="img-view"><img src="static/upload/' + fileName + '" alt="' + fileName + '"></div><div class="img-opt"><i onclick="showImage(this)" title="查看原图" class="layui-icon layui-icon-search"></i><i onclick="delAvatar()" title="删除图片" class="layui-icon layui-icon-delete"></i></div></div>';
            $("#avatarImage").empty().append($html);
        } else {
            $("#avatarImage").empty();
        }

    }

    function delAvatar() {
        layer.confirm('确定删除该图片吗?', {icon: 3, title: "询问"}, function (index) {
            avatar = "";
            setAvatar(avatar);
            layer.close(index);
        })
    }

    function showImage(_this) {
        const fileName = $(_this).parents(".image-item").find('img').prop('alt')
        layer.photos({
            photos: {
                data: [{
                    alt: fileName,
                    src: 'static/upload/' + fileName
                }]
            }
        })
    }

    function getImageList() {
        let id = "${userinfo.id}";
        if (id) {
            $.ajax({
                url: "userinfo/photo/" + id,
                method: "get",
                dataType: "json",
                success(res) {
                    if (res.code === 200) {
                        imageUrls = res.data.map(item => item.photo)
                        setPhoto();
                    }
                },
                error(e) {
                    console.log(e)
                    layer.alert('获取图片数据异常！', {icon: 2})
                }
            })
        }
    }

    function setPhoto() {
        if (imageUrls.length > 0) {
            $("#imageUrls").val(imageUrls);
            let $html = '';
            for (let url of imageUrls) {
                $html += '<div class="image-item"><div class="img-view"><img src="static/upload/' + url + '" alt="' + url + '"></div><div class="img-opt"><i onclick="showImage(this)" title="查看原图" class="layui-icon layui-icon-search"></i><i onclick="delPhoto(this)" title="删除图片" class="layui-icon layui-icon-delete"></i></div></div>'
            }
            $("#photoImage").empty().append($html);
        } else {
            $("#imageUrls").val('');
            $("#photoImage").empty();
        }
    }

    function delPhoto(_this) {
        layer.confirm('确定删除该图片吗？', {icon: 3, title: "询问"}, function (index) {
            /*当前点击的按钮所在的item在photoImage的div中的下标*/
            const arrayIndex = $(_this).parents(".image-item").index("#photoImage .image-item");
            imageUrls.splice(arrayIndex, 1);//根据下标删除数组中的值
            setPhoto();
            layer.close(index);
        })
    }
</script>
</html>
